<template>
	<view class="rechargeDetail">
		<topTitle :title="$t('bill.title')">
			<template #right>
				<image @click="show = true" src="@/static/image/64.png" mode="widthFix" />
			</template>
		</topTitle>
		<view class="tab">
			<view :class="{ active: tab == 0 }" @click="order_id = null; tabFn(0)">
				{{ $t('bill.quantitativeAccount') }}
			</view>
			<view :class="{ active: tab == 1 }" @click="order_id = null; tabFn(1)">
				{{ $t('bill.smartAccount') }}
			</view>
			<view :class="{ active: tab == 2 }" @click="order_id = null; tabFn(2)">
				{{ $t('bill.profitAssets') }}
			</view>
		</view>
		<view class="list" v-if="listData?.length">
			<view v-for="(item, idx) in listData" :key="idx">
				<view>
					<view>{{ orderIdFilter(item.order_id) }}</view>
					<view class="time">{{ formattingTime(item.add_time) }}</view>
				</view>
				<view :class="{ out: item.after_money - item.before_money < 0 }">
					{{ item.after_money - item.before_money }} USDT
				</view>
			</view>
		</view>
		<noData v-else />

		<up-popup :show="show" :round="25" mode="bottom" @close="show = false" @open="show = true" closeable>
			<view class="filter" @touchmove.stop>
				<view class="title">{{ $t('bill.filter.title') }}</view>
				<view class="filterList">
					<view :class="{ active: order_id === null }" @click="filterFn(null)">
						{{ $t('bill.filter.all') }}
					</view>
					<view v-for="(item, idx) in filterList" :key="idx" :class="{ active: item.order_id === order_id }"
						@click="filterFn(item.order_id)">
						{{ item.order_name }}
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from "vue";
	import { onReachBottom } from "@dcloudio/uni-app";
	const instance = getCurrentInstance()?.appContext.config.globalProperties;
	import { OrderType, UserOrder, OrderTypeQuantify, UserOrderQuantify, OrderTypeWisdom, UserOrderWisdom } from "@/api/UserApi";
	const show = ref(false);
	let tab = ref<number>(0)
	let order_id = ref<any>(null)

	let listData = ref<Array<any>>([]);
	let filterList = ref<Array<any>>([]);
	let select_time : any = null;
	const tabFn = (index : number) => {
		tab.value = index

		select_time = null
		listData.value = []
		initFn()
	}
	const filterFn = (id : any) => {
		order_id.value = id
		show.value = false
		tabFn(tab.value)
	}


	const initFn = async () => {
		let list : any = []
		let obj = {
			select_time, income: null, order_id: order_id.value
		}
		if (tab.value === 0) {
			list = await UserOrderQuantify(obj)
			filterList.value = await OrderTypeQuantify()

		} else if (tab.value === 1) {
			list = await UserOrderWisdom(obj)
			filterList.value = await OrderTypeWisdom()
		} else if (tab.value === 2) {
			list = await UserOrder(obj)
			filterList.value = await OrderType()
		}
		if (!select_time) {
			listData.value = list;
		} else {
			listData.value = [...listData.value, ...list];
		}
	};

	initFn()


	const orderIdFilter = (order_id : number) => {
		let item = filterList.value.filter(e => e.order_id == order_id);
		if (!item.length) {
			return
		}
		return item[0].order_name
	}
	onReachBottom(() => {
		select_time = listData.value[listData.value.length - 1].add_time;
		initFn();
	});
</script>

<style scoped lang="scss">
	@import "../../static/scss/rechargeDetail.scss";
</style>